import React,{useState} from "react";
import {InputWrapper} from './comment.style'
function CommentInput() {
    const [username, setUsername] = useState('gch');
    const [content, setContent] = useState('')
    // 状态
    const handleSubmit = () =>{
        const comment = {
            username,
            content,
        }
       // console.log(comment,'---')
    }
    const handleusernameChange = (event) =>{
        setUsername(event.target.value)
    }
    const handlecontentChange = (event) => {
        setContent(event.target.value)
    }
    return (
        <InputWrapper>
        <div>
        <div className="comment-field">
            <span className="comment-field-name">用户名：</span>
            <div className="comment-field-input">
                <input type = "text" value={username} onChange={handleusernameChange}/>
            </div>
        </div>
        <div className="comment-field">
            <span className="comment-field-name">评论内容：</span>
            <div className="comment-field-input">
                {/* 数据驱动的界面 表单和其他的不一样 要交互
                状态绑定了表单 一个方向
                表单的输入也可以同步到状态就好了 
                双向绑定 
                react 不支持双向绑定  单向数据绑定*/}
                <textarea type = "text" value={content} onChange={handlecontentChange}></textarea>
            </div>
        </div>
        <div className="comment-field-button">
           <button onClick={handleSubmit}>发布</button>
        </div>
        </div>
        </InputWrapper>
    )
}
export default CommentInput